<template>
  <div class="inviteCommission front-color">
    <div class="headGuide clearfix">
      <span class="inviteCommissionTitle">{{$t('myAdd.invitation.invitationCommission')}}</span>
      <span class="inviteCommissionTotal"><span class="text">{{$t('myAdd.invitation.totalGet')}}:</span><span class="number">{{hasInvitedCommission}}</span><span class="unit">CNY</span></span>
      <span class="back pointer" @click="goBack"><span class="sideIcon"><</span>{{$t('myAdd.invitation.back')}}</span>
    </div>
    <div class="listData">
      <table>
        <thead>
        <tr>
          <th class="nameText">{{$t('myAdd.invitation.activeNum')}}</th>
          <th class="timeText">{{$t('myAdd.invitation.time')}}</th>
          <th class="rewardText">{{$t('myAdd.invitation.commission')}}</th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in showInviteCommission" :key="index">
            <td class="name commissionName">{{item.inviteCount}}</td>
            <td class="time commTime">{{item.ctime}}</td>
            <td class="reward"><span class="number">+{{item.commissionCount}}</span><span>CNY</span></td>
          </tr>
        </tbody>
      </table>
      <noData v-if="!inviteCommissionLeng"></noData>
      <VPagination v-if="(inviteCommissionPage.count/inviteCommissionPage.pageSize) > 1"
                   :total="inviteCommissionPage.count"
                   :current-page='inviteCommissionPage.page'
                   :display='inviteCommissionPage.pageSize'
                   @pagechange="inviteCommissionPageChange($event)" class="page">
      </VPagination>
    </div>
  </div>
</template>

<script>
import VPagination from '@/components/common/pagination'
import noData from '@/components/addPage/common/noData'
export default {
  name: 'inviteCommission',
  components: { VPagination, noData },
  data () {
    return {
      inviteCommissionPage: {
        count: '',
        pageSize: 10,
        page: 1
      },
      hasInvitedCommission: this._P.fixUrl('commission'),
      inviteCommission: [],
      showInviteCommission: []
    }
  },
  computed: {
    inviteCommissionLeng () {
      return this.inviteCommissionPage.count
    }
  },
  mounted () {
    this.getInviteCommission()
  },
  methods: {
    inviteCommissionPageChange (page) {
      this.inviteCommissionPage.page = page
      this.showInviteCommission = this.inviteCommission[page - 1]
    },
    goBack () {
      this.$router.go(-1)
    },
    getInviteCommission () {
      this.axios({
        url: this.$store.state.url.invite.commission_list,
        headers: {},
        methods: 'post'
      }).then(res => {
        if (res.code.toString() === '0') {
          this.inviteCommission = []
          this.inviteCommissionPage.count = res.data.length
          res.data.forEach((item, index) => {
            item.ctime = this._P.formatTime(item.ctime)
            let page = Math.floor(index / this.inviteCommissionPage.pageSize)
            if (!this.inviteCommission[page]) {
              this.inviteCommission[page] = []
            }
            this.inviteCommission[page].push(item)
          })
          this.showInviteCommission = this.inviteCommission[this.inviteCommissionPage.page - 1]
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    }
  }
}
</script>

